<style lang="scss" scoped>
@import "../../css/pwd.scss";
.get_money {
  main {
    .sub_tit {
      margin-top: 0.48rem;
    }
    .tit,
    li {
      height: 0.5rem;
      line-height: 0.5rem;
    }
    .select {
      width: 0.16rem;
      height: 0.16rem;
      border-radius: 100%;
    }
  }

  footer {
    padding-top: 0.76rem;
  }
  .number {
    margin-top: 0.34rem;
  }
  .c000 {
    color: #000;
  }
}
</style>

<template>
    <div class="get_money">
        <main>
            <div class="tit bgfff padding-lr15 c81">选择提现方式（预计24小时以内完成）</div>
            <ul class="padding-l15 bgfff">
                <!-- <li class="border-b flex-col">
                    <i class="iconfont icon-shouji"></i>
                    <div class="box1 padding-l10">工商银行</div>
                    <div class="padding-lr15">
                        <i class="iconfont icon-shouji"></i>
                    </div>
                </li> -->
                <li class="flex-col flex-middle">
                    <i class="iconfont icon-weibiaoti- font-20"></i>
                    <div class="box1 padding-l10">银行卡</div>
                    <div class="padding-lr15">
                        <div class="select cfff bgred box-center">
                            <i class="iconfont icon-gou cfff font-20"></i>
                        </div>
                    </div>
                </li>
            </ul>

            <div class="tit sub_tit bgfff padding-lr15 c81">提现金额（
                <span class="font-12">收取0.1%手续费</span>）</div>
            <ul class="padding-l15 bgfff">
                <li class="border-b flex-col">
                    <span class="font-16">￥</span>
                    <input type="number" class="c82 font-12 box1 padding-l10" v-model="getMoney" placeholder="请输入提现金额">
                </li>
                <li class="font-12">
                    可用佣金：{{money}} 元
                </li>
            </ul>
        </main>

        <footer class="box-center footer  box-center ">
            <div class="cfff box-center" @click="cut_pwd(1)">预计24小时内放款，确认提现</div>
        </footer>

        <div class="forget_pwd full position-f flex-row" v-show="forget_pwd">
            <div class="box1" @click="cut_pwd"></div>
            <div class="main">
                <div class="tit flex-col border-bb">
                    <div class="padding-lr15" @click="cut_pwd">
                        <i class="iconfont icon-fanhui"></i>
                    </div>
                    <div class="box1 text-c">输入密码</div>
                    <div class="padding-lr15">
                        <!-- <i class="iconfont icon-shouji"></i> -->
                    </div>
                </div>
                <div class="text-c tit">提取现金{{getMoney}}元</div>
                <ul class="pwd padding-lr15 flex-col cfff">
                    <li class="box-center box1" :class="{c000:changePwd[0]}">*</li>
                    <li class="box-center box1" v-for="i in 5" :key="i" :class="{c000:changePwd[i]}">*</li>
                </ul>
                <div class="flex-col flex-right">
                    <div class="cred padding-15">忘记密码?</div>
                </div>
                <ul class="number font-20 flex-parent bgfff">
                    <li class="border-t border-l box1 box-center" v-for="i in 9" :key="i" @click="addPwd(i)">{{i}}</li>
                    <li class="border-t border-l box1 box-center bge3"></li>
                    <li class="border-t border-l box1 box-center" @click="addPwd('0')">0</li>
                    <li class="border-t border-l box1 box-center bge3" @click="changePwd.pop()">
                        <i class="iconfont icon-shanchushangwu103401 font-24"></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      hasCard: false,
      money: 0,
      getMoney: null,
      changePwd: [],
      forget_pwd: false
    };
  },
  created() {
    this.money = this.$route.query.money;
    this.updateUserInfo();
    this.handleCard();
  },
  watch: {
    changePwd(val) {
      if (val.length === 6) {
        this.getUserMoney(parseInt(val.join("")));
      }
    }
  },
  methods: {
    cut_pwd(i) {
      let that = this;
      if (i && !this.hasCard) {
        that.alert("你还没有添加银行卡，现在去添加吧。", 2, () => {
          that.toRouter("add_card/" + 0);
        });
      }
      if (i && !this.getMoney) {
        this.layer("请输入提现金额");
        return;
      }
      if (i && this.getMoney > this.money) {
        this.layer("提现金额不能大于余额");
        return;
      }
      if (i && this.getMoney < 10) {
        this.layer("提现金额不能小于10元");
        return;
      }
      if (i && this.getCache("userInfo").paypassword_status) {
        this.alert("你还没有支付密码，现在就去设置吧。", 2, () => {
          that.toRouter("set_pay");
        });
      } else {
        this.forget_pwd = !this.forget_pwd;
      }
    },
    // 提现
    getUserMoney(payPassWord) {
      let that = this;
      this.http
        .post("commissionextractinfo/getMoney", {
          extractinfoMoney: that.getMoney,
          payPassWord
        })
        .then(res => {
          if (res.code === 505) {
            that.changePwd = [];
          } else if (res.code === 503) {
            that.alert("你还没有支付密码，现在就去设置吧。", 2, () => {
              that.toRouter("set_pay");
            });
          } else {
            that.alert("提现申请成功，等待客户处理。", 1, () => {
              that.back();
            });
          }
        });
    },
    // 输入密码
    addPwd(num) {
      if (this.changePwd.length === 6) return;
      this.changePwd.push(num);
    },
    // 查看是否有 银行卡，进行相应操作
    handleCard() {
      let that = this;
      this.http.get("userbankcard/info").then(res => {
        if (res.data) {
          //   that.toRouter("banl_card");
          this.hasCard = true;
        } else {
          that.alert("你还没有添加银行卡，现在去添加吧。", 2, () => {
            that.toRouter("add_card/" + 0);
          });
        }
      });
    }
  }
};
</script>

